<template>
  <view class="container">
    <view class="custom-tabs">
      <view
        :class="['tab', activeTab === 0 ? 'active' : '']"
        @click="activeTab = 0"
        >登录</view
      >
      <view
        :class="['tab', activeTab === 1 ? 'active' : '']"
        @click="activeTab = 1"
        >注册</view
      >
    </view>
    <view v-if="activeTab === 0">
      <wd-form ref="loginFormRef">
        <wd-form-item label="账号">
          <wd-input v-model="loginForm.username" placeholder="请输入账号" />
        </wd-form-item>
        <wd-form-item label="密码" label-width="100px">
          <wd-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
          />
        </wd-form-item>
      </wd-form>
      <wd-button type="primary" block @click="handleLogin">登录</wd-button>
    </view>
    <view v-else>
      <wd-form ref="registerFormRef">
        <wd-form-item label="账号" label-width="100px">
          <wd-input v-model="registerForm.username" placeholder="请输入账号" />
        </wd-form-item>
        <wd-form-item label="密码" label-width="100px">
          <wd-input
            v-model="registerForm.password"
            type="password"
            placeholder="请输入密码"
          />
        </wd-form-item>
        <wd-form-item label="确认密码" label-width="100px">
          <wd-input
            v-model="registerForm.confirmPassword"
            type="password"
            placeholder="请确认密码"
          />
        </wd-form-item>
      </wd-form>
      <wd-button type="success" block @click="handleRegister">注册</wd-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store/user";
import { http } from "@/utils/http";
import { showToast } from "@/utils/toast";
import { storeToRefs } from "pinia";
import { onMounted, ref } from "vue";

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const activeTab = ref(0);
const tabList = [{ name: "登录" }, { name: "注册" }];

const loginForm = ref({ username: "", password: "" });
const registerForm = ref({ username: "", password: "", confirmPassword: "" });

onMounted(() => {});
const handleLogin = async () => {
  if (!loginForm.value.username || !loginForm.value.password) {
    showToast("请输入账号和密码");
    return;
  }
  // const data = {
  //   username: loginForm.value.username,
  //   password: loginForm.value.password
  // }
  // console.log(data)
  await http
    .post(
      `/admin-api/picturebook/login?username=${loginForm.value.username}&password=${loginForm.value.password}`
    )
    .then(async (res) => {
      if (res.code == 0) {
        uni.setStorage({
          key:"token",
          data: res.data.token
        })
        showToast("登录成功");
        await userStore.setUserInfo({
          id: res.data.token,
          username: loginForm.value.username,
          avatar: "/static/images/default-avatar.png",
          token: res.data.token,
        });
        uni.setStorage({
          key:"isLogin",
          data: "1"
        })
      } else {
        showToast("登录失败");
      }
    });
  uni.navigateBack();
  // 登录逻辑
};

function handleRegister() {
  if (
    !registerForm.value.username ||
    !registerForm.value.password ||
    !registerForm.value.confirmPassword
  ) {
    showToast("请填写完整信息");
    return;
  }
  if (registerForm.value.password !== registerForm.value.confirmPassword) {
    showToast("两次输入的密码不一致");
    return;
  }
  // 注册逻辑
  showToast("注册成功（示例）");
}
</script>

<style scoped>
.container {
  padding: 40rpx;
  max-width: 600rpx;
  margin: 0 auto;
}
.custom-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 32rpx;
}
.tab {
  flex: 1;
  text-align: center;
  padding: 24rpx 0 18rpx 0;
  font-size: 32rpx;
  color: #888;
  position: relative;
  cursor: pointer;
}
.tab.active {
  color: #1976d2;
  font-weight: bold;
  border-bottom: 4rpx solid #1976d2;
  background: #fff;
}
</style> 